<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>AJAX封装_响应处理</title>
</head>

<body>
    <h1>AJAX封装_响应处理</h1>
    <input type="button" value="获取响应数据get" onclick="get_data_get()">
    <input type="button" value="获取响应数据post" onclick="get_data_post()">
    <script>
        function ajax(options) {
            /**
             * options:
             *  type: 请求的方式
             *  url: 请求的地址
             *  data: 请求的参数，类型是JSON
             *  success: 请求成功以后，如何处理,函数
             *  error: 请求失败以后，如何处理,函数
            */

            // 创建 AJAX 对象
            let xhr = new XMLHttpRequest()

            // 处理请求的参数
            let params = ''
            for (let key in options.data) {
                value = options.data[key]
                params = params + key + '=' + value + '&'
            }
            // 去掉最后一个&
            params = params.substr(0, params.length - 1)

            // get请求拼接参数（传递参数）
            if (options.type === 'get') {
                options.url = options.url + '?' + params
            }

            // 配置请求参数
            xhr.open(options.type, options.url)

            // post传递参数
            if (options.type === 'post') {
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                xhr.send(params)
            } else {
                xhr.send()
            }

            // 接收响应
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        options.success(xhr.responseText)
                    } else {
                        options.error(xhr.status);
                    }
                }
            }

            // 网络请求失败
            xhr.onerror = ()=>{
                options.error('1000:网络错误')
            }

        }

        function get_data_get() {
            ajax({
                type: 'get',
                url: 'http://httpbin.org/getsdfsdfasdfgasgsgsdg',
                data: { 'name': 'sxt', 'pwd': 123 },
                success: (data) => {
                    console.log(data)
                    console.log('-------test-------')
                },
                error: (data) => {
                    console.log('返回的状态码是：'+data)
                }
            })
        }
    </script>
</body>

</html>